<script setup lang="ts">
import type { accData } from '../types';
import { DIRECT_REASON_LIST } from '../constants/index';
import time from '@/utils/time';
import { findNameById } from '@/utils/array';

interface IProps {
  data?: accData;
}

const props = defineProps<IProps>();

const isOpen = ref(false);

const emit = defineEmits(['click']);
</script>

<template>
  <view class="customer-border text-14 bg-white overflow-hidden">
    <view
      class="h-80 flex justify-between items-center px-4 border-2 border-solid border-gray-8 border-t-0 border-r-0 border-l-0"
      @click="isOpen = !isOpen"
    >
      <view class="color-black-3">总单基础信息</view>
      <up-icon size="14" color="#191919" :name="isOpen ? 'arrow-up' : 'arrow-down'"></up-icon>
    </view>
    <app-cell title="总单ID" titleClass="color-gray-9" :value="data.orderId" border />
    <app-cell
      title="运输地址"
      titleClass="color-gray-9"
      :value="`${data.tranposId}/${data.tranposName}`"
      border
    />
    <app-cell
      title="物流中心"
      titleClass="color-gray-9"
      :value="`${data.logistCenterId}/${data.logistCenterName}`"
      :border="isOpen"
    />
    <view v-show="isOpen">
      <app-cell
        title="直调原因"
        titleClass="color-gray-9"
        :value="findNameById(data.directReason, DIRECT_REASON_LIST)"
        border
      />
      <app-cell title="直调人员" titleClass="color-gray-9" :value="data.directrgMan" border />
      <app-cell title="直调验收地点" titleClass="color-gray-9" :value="data.directPosName" border />
      <app-cell
        title="直调验收时间"
        titleClass="color-gray-9"
        :value="data.checkDate ? time.format(data.checkDate, time.FORMATS.ISO_DATE) : '-'"
        border
      />
      <app-cell title="创建时间" titleClass="color-gray-9" :value="data.creDate" border />
      <app-cell title="备注" titleClass="color-gray-9" :value="data.memo" border />
      <app-cell
        title="图片附件"
        titleClass="color-gray-9"
        :value="data.pictureCount || 0"
        :isLink="true"
        @click="emit('click')"
      />
    </view>
  </view>
</template>
